<template>
  <div>
    <div class="pb10px">
      <el-form ref="searchForm" :model="searchForm" inline>
        <el-form-item label="">
          <el-button type="primary" @click="handleAdd" icon="el-icon-plus">新增</el-button>
          <el-button type="danger" size="small" icon="el-icon-remove-outline" @click="batchDelete(null)" :disabled="selectionRows.length<=0">批量删除 </el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table ref="multipleTable" :data="listData" tooltip-effect="dark" style="width: 100%" @selection-change="selectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="id" label="ID" width="50"></el-table-column>
      <!-- 订单类型 -->
      <el-table-column label="取餐方式">
        <template slot-scope="scope">
          {{ scope.row.otype }}
        </template>
      </el-table-column>

      <el-table-column prop="onumber" label="订单流水号"></el-table-column>
      <el-table-column prop="uid" label="用户ID"></el-table-column>
      <el-table-column prop="oprice" label="订单价格"></el-table-column>
      <!-- 支付状态 -->
      <el-table-column label="支付状态">
        <template slot-scope="scope">
          <el-tag :type="scope.row.paystate === '已支付' ? 'success' : 'danger'">
            {{ scope.row.paystate }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="otime" label="支付时间"></el-table-column>
      <!-- 订单状态 -->
      <el-table-column label="订单状态">
        <template slot-scope="scope">
          <el-tag :type="getOrderStateTag(scope.row.ostate)">
            {{ scope.row.ostate }}
          </el-tag>
        </template>
      </el-table-column>
      <!-- 订单备注 -->

      <el-table-column label="操作" width="260" fixed="right">
        <template slot-scope="scope">
          <el-button icon="el-icon-edit-outline" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button icon="el-icon-remove-outline" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-top: 20px">
      <el-pagination @current-change="currentChange" @size-change="sizeChange" :page-sizes="pageSizes" :page-size="pageInfo.pageSize" :current-page="pageInfo.currentPage" background layout="sizes, prev, pager, next" :total="pageInfo.total"></el-pagination>
    </div>
    <el-drawer :title="formData.id?'编辑':'新增'" :visible.sync="isDrawerDialog" size="600px" direction="rtl" :wrapper-closable="false" :before-close="closeDrawer">
      <div class="demo-drawer_content" style="padding-right: 40px;box-sizing: border-box">
        <el-form :model="formData" label-width="120px" class="demo-ruleForm">
          <!-- 订单类型 -->
          <el-form-item label="订单类型">
            <el-select v-model="formData.otype" placeholder="请选择">
              <el-option label="外卖" value="外卖"></el-option>
              <el-option label="自取" value="自取"></el-option>
            </el-select>
          </el-form-item>
          <!-- 收货地址 -->


          <el-form-item label="订单流水号">
            <el-input v-model="formData.onumber"></el-input>
          </el-form-item>
          <el-form-item label="取餐人">
            <el-input v-model="formData.uid"></el-input>
          </el-form-item>
          <el-form-item label="订单价格">
            <el-input v-model="formData.oprice"></el-input>
          </el-form-item>
          <!-- 支付状态 -->
          <el-form-item label="支付状态">
            <el-select v-model="formData.paystate" placeholder="请选择">
              <el-option label="未支付" value="未支付"></el-option>
              <el-option label="已支付" value="已支付"></el-option>
            </el-select>
          </el-form-item>
          <!-- 支付时间 -->
          <el-form-item label="支付时间">
            <el-date-picker v-model="formData.otime" type="datetime" format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm" placeholder="选择日期时间"></el-date-picker>
          </el-form-item>
          <!-- 订单状态 -->
          <el-form-item label="订单状态">
            <el-select v-model="formData.ostate" placeholder="请选择">
              <el-option label="未收货" value="未收货"></el-option>
              <el-option label="已收货" value="已收货"></el-option>
              <el-option label="退订" value="退订"></el-option>
              <el-option label="禁用" value="禁用"></el-option>
            </el-select>
          </el-form-item>

        </el-form>
      </div>
      <div class="demo-drawer_footer" style="display: flex; justify-content: space-around;">
        <el-button @click="closeDrawer" icon="el-icon-close">取消</el-button>
        <el-button type="primary" @click="submitDrawer" icon="el-icon-check">提交</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isDrawerDialog: false,
      listData: [],
      pageInfo: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      searchForm: {},
      selectionRows: [],
      formData: {
        otype: '',
        paystate: '',
        ostate: ''
      },
      pageSizes: [5, 10, 20, 30]
    }
  },
  created() {
    this.getPageList()
  },
  methods: {
    // 状态映射方法
    getOrderType(value) {
      return { '外卖': '外卖', '自取': '自取' }[value] || '未知'
    },
    getPayState(value) {
      return { '未支付': '未支付', '已支付': '已支付' }[value] || '未知'
    },
    getOrderState(value) {
      return { '未收货': '未收货', '已收货': '已收货', '退订': '退订', '禁用': '禁用' }[value] || '未知'
    },
    getOrderStateTag(value) {
      const map = {
        '未收货': 'warning',
        '已收货': 'success',
        '退订': 'info',
        '禁用': 'danger'
      }
      return map[value] || ''
    },
    // 其他原有方法保持不变
    getPageList() {
      let data = Object.assign(this.searchForm, this.pageInfo)
      this.request.get("/userOrder/page", { params: data }).then(res => {
        this.listData = res.data.list.map(item => ({
          ...item,
          otype: this.getOrderType(item.otype),
          paystate: this.getPayState(item.paystate),
          ostate: this.getOrderState(item.ostate)
        }))
        this.pageInfo.total = res.data.total
      })
    },
    currentChange(e) {
      this.pageInfo.pageNum = e
      this.getPageList()
    },
    sizeChange(e) {
      this.pageInfo.pageSize = e
      this.getPageList()
    },
    handleSearch() {
      this.pageInfo.pageNum = 1
      this.getPageList()
    },
    closeDrawer() {
      this.isDrawerDialog = false
    },
    submitDrawer() {
      let formToSubmit = {...this.formData}
      if (!formToSubmit.id) {
        this.request.post("/userOrder", formToSubmit).then(res => {
          if (res.code === 200) {
            this.isDrawerDialog = false
            this.$message.success(res.msg)
            this.getPageList()
          }
        })
      } else {
        this.request.put("/userOrder", formToSubmit).then(res => {
          if (res.code === 200) {
            this.isDrawerDialog = false
            this.$message.success(res.msg)
            this.getPageList()
          }
        })
      }
    },
    handleAdd() {
      this.isDrawerDialog = true
      this.formData = {}
    },
    handleEdit(index, row) {
      this.isDrawerDialog = true
      this.formData = {...row}
    },
    selectionChange(rows) {
      this.selectionRows = rows
    },
    handleDelete(index, row) {
      this.batchDelete([row])
    },
    batchDelete(rows) {
      if (!rows) rows = this.selectionRows
      let ids = rows.map(item => item.id)
      this.$confirm(`确定删除ID为[${ids}]的数据?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.request.delete("/userOrder/", { ids }).then(res => {
          if (res.code === 200) {
            this.$message.success(res.msg)
            this.getPageList()
          }
        })
      }).catch(() => {
        this.$message.info('已取消删除')
        this.$refs.multipleTable.clearSelection()
      })
    }
  }
}
</script>

<style scoped>
.pb10px {
  padding-bottom: 10px;
}
.demo-drawer_content {
  padding: 20px;
}
.el-tag {
  margin: 2px;
}
</style>


